<template>
    <view>
		<view class="title">宝贝</view>
		<view class="cart_main">
				<view v-if="footprint.length">
				<navigator class="cart_item"
				v-for="item in footprint"
				:key="item.pics[0].goods_id"
				:url="`/pages/goods_detail/main?goods_id={{item.pics[0].goods_id}}`"
				>

				<!-- 图片 -->
				<navigator class="cart_img_wrap">
					<image mode="widthFix" :src="item.pics[0].pics_mid"></image>
				</navigator>
				<!-- 信息 -->
				<view class="cart_info_wrap">
					<view class="goods_name">{{item.goods_name}}</view>
					<view class="goods_price_wrap">
						<view class="goods_price">￥{{item.goods_price}}</view>
						
					</view>
				</view>
				</navigator>
				</view>
				<view v-else class="kong">暂无相关足迹~</view>
		</view>

		<like></like>
	</view>
</template>

<script>
import like from "@/components/like"
	export default {
		components:{
			like
		},
		data(){
			return{
				footprint:[]
			}
    	},
		onShow(){
			this.footprint = uni.getStorageSync('footCart')||[];
		},

		methods:{
			onReachBottom(){
                uni.showToast({
                    title: '都不喜欢吗？',
                    icon:'none'
                });
               
            },
		}
      
		
	}
</script>

<style lang="scss">

	.title{
		padding: 20rpx;
		font-size: 28rpx;
		color: #e64340;
		border-top: 1rpx solid #ccc;
		border-bottom: 1rpx solid #ccc;
	}
	.cart_main {
			
			.cart_item {
			display: flex;
			padding: 10rpx;
			border-bottom: 1rpx solid #ccc;
		
			
			.cart_img_wrap {
				flex: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
				width: 80%;
				}
			}
		
			
			.cart_info_wrap {
				flex: 4;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.goods_name {
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2; 
					color: #666;
				}
		
				
			.goods_price_wrap {
				display: flex;
				justify-content: space-between;
				.goods_price {
					color: #e64340;
					font-size: 34rpx;
				}
		
			
				}
			}
			}

			.kong{
				margin-top: 100rpx;
				margin-left: 290rpx;
				color: #666;
			}
		}
</style>